<template>
	<view>
		<custom-header title="缺货详情" />
		<view :style="{height:'calc(100vh - '+statusBarHeight+'px)'}">
			<view class="_wrap">
				<view class="cotent_wrap">
					<view class="title">缺货详情</view>
					<view class="info_wrpa">
						<view class="info">
							<view class="label">缺货数量</view>
							<view class="value">1</view>
						</view>
						<view class="info">
							<view class="label">责任方</view>
							<view class="value">车间配货</view>
						</view>
						<view class="info">
							<view class="label">缺货时间</view>
							<view class="value">2025-02-05  02:39:40</view>
						</view>
						<view class="info">
							<view class="label">缺货备注</view>
							<view class="value">车间7组，装箱时发现断头</view>
						</view>
					</view>
					<view class="img_wrap">
						<view class="img_title">质检照片</view>
						<view class="img_list_wrap">
							<view 
								class="list" 
								v-for="(item,index) in imgList" 
								:key="index"
								@click="handlePreviewImage(index)">
								<image :src="item.url" lazy-load></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const imgList = ref([
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		}
	])
	// 预览图片
	const handlePreviewImage = (index)=>{
		console.log(imgList.value.map((item)=> item.url))
		uni.previewImage({
			current:index || 0,
			urls:imgList.value.map((item)=> item.url )
		})
	}
	
	onLoad((option)=>{
		console.log(option)
	})
</script>

<style lang="scss">
	._wrap{
		padding: 20rpx;
		height: calc(100% - 60rpx);
		.cotent_wrap{
			background: #fff;
			border-radius: 10rpx;
			padding: 0 20rpx;
			height: 100%;
			font-size: 24rpx;
		}
		.title{
			color: #333;
			padding: 20rpx 0;
			border-bottom: 1px solid #E5E5E5;
			font-weight: bold;
		}
		.info_wrpa{
			padding-bottom:20rpx;
			border-bottom: 1px solid #E5E5E5;
			.info{
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;
				.label{
					color: #666666;
				}
				.value{
					color: #333333;
				}
			}
		}
		.img_wrap{
			.img_title{
				padding: 20rpx 0;
				font-size: 28rpx;
				color: #333333;
			}
			.img_list_wrap{
				display: flex;
				flex-wrap: wrap;
				.list{
					width: 200rpx;
					height: 200rpx;
					margin: 0rpx 20rpx 20rpx 0 ;
					
				}
				image{
					width: 100%;
					height:100%;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
